<template>
    <div class="admin">
      <!-- user -->
      <div class="user">
          <div class="tx" @click="loginFn">
            <div class="img"><img src="../../assets/tx.png" ><i></i></div>
            <p class="text">用户186****3570</p>
          </div>
          <div class="info">
            <router-link class="link" to="/admin/attent"><span>0</span>个<i>粉丝</i></router-link>
            <router-link class="link" to="/admin/video"><span>1</span>个<i>我的作品</i></router-link>
            <p class="link" to="/admin"><span>3</span>个<i>观影币</i></p>
          </div>
      </div>
      <!-- vip -->
      <mt-cell class="vip" title="开通VIP每日1元网站免费看">
        <img slot="icon" src="../../assets/vip.png" width="24" height="24">
        <a href="">点击开通</a>
      </mt-cell>

       <!-- link  -->
      <mt-cell class="list" title="每日签到送观影币">
        <img slot="icon" src="../../assets/my_1.png" width="24" height="24">
        <i class="qd" @click="dayQdFn">今日签到</i>
        <!-- <span>已连续签到20天</span> -->
      </mt-cell>
      <mt-cell class="list" title="我的视频" is-link :to="{name:'video'}">
        <img slot="icon" src="../../assets/my_2.png" width="24" height="24">
        <span>1个</span>
      </mt-cell>

      <!-- ad -->
      <div class="ad"><img src="../../assets/ad.jpg"></div>

       <!-- link  -->
      <mt-cell class="list" title="消费记录" is-link :to="{name:'pay'}">
        <img slot="icon" src="../../assets/my_3.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="list" title="我的收益" is-link :to="{name:'profit'}">
        <img slot="icon" src="../../assets/my_4.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="list" title="推广赚钱" is-link :to="{name:'promote'}">
        <img slot="icon" src="../../assets/my_5.png" width="24" height="24">
        <span>1元</span>
      </mt-cell>
      <mt-cell class="list" title="我的收藏" is-link :to="{name:'like'}">
        <img slot="icon" src="../../assets/my_6.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="list" title="观看记录" is-link :to="{name:'history'}">
        <img slot="icon" src="../../assets/my_7.png" width="24" height="24">
      </mt-cell>
    </div>
</template>

<script>
import { Cell, MessageBox } from 'mint-ui'
import TopBar from '@/components/TopBar'
export default {
  data () {
    return {

    }
  },
  created () {
  },
  methods: {
    loginFn () {
      this.$router.replace('/admin/login')
    },
    dayQdFn () {
      MessageBox({
        title: '签到成功',
        message: '获取1枚观影币',
        confirmButtonText: '我知道了',
        confirmButtonClass: 'btnsure'
      })
    }
  },
  components: {
    TopBar,
    mtCell: Cell
  }
}
</script>
<style lang="less" >
  .admin {   position: relative; padding:10px; overflow: hidden; }
  .admin::after{ position: absolute; top:-30px; right:-20px; content: ''; width: 65px; height: 65px; background: #f4f2f7; border-radius: 50%}

  .admin .user {
    padding:10px 10px 0;
    .tx {
      display: flex; justify-content: left; align-items: center; height: 90px; padding: 0 10px;
      .img {
        position: relative; width:66px; height: 66px; margin-right:16px; font-weight: bold;
        img { border-radius: 50%; border:#fff 1px solid; position: relative; z-index: 2;}
        i { position: absolute; top:20px; right:0; content: ''; width: 65px; height: 65px; background:#f4f2f7; border-radius: 50%; filter: blur(8px);}
      }
      .text { font-size: 21px; color: #39314a;}
    }
    .info{
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 30px 0;
      .link {
        text-align: center;color: #39314a; line-height:24px;
        span {font-size: 21px; line-height:24px;}
        i { display: block; color: #808080; font-size: 12px;}
      }
    }
  }

  .admin .vip {
     margin-bottom:16px;
     img { width: 41px; height:15px; display: inline-block; }
     a { padding: 0 10px; border-radius: 5px; line-height: 25px; background: #FF9405; color: #fff; text-align: center; }
  }

  .ad { padding: 10px 10px 10px 0;}

  .admin .list {
    min-height:42px;
    img { width: 20px; height: 20px; padding-right: 5px; display: inline-block;}
    .mint-cell-text { font-size: 16px; font-weight: bold; }
    .mint-cell-allow-right::after { width: 10px; height: 10px;}
    .qd { padding: 0 6px; font-size: 12px; border-radius: 5px; line-height: 20px; background:rgba(255,148,5,0.8); color: #fff; text-align: center;}
  }

  .mint-msgbox {
    width: 70%;
    .mint-msgbox-content { border:none; padding: 0;}
    .mint-msgbox-btns { height: 60px;}
    .btnsure { font-weight: bold; background: #ff9405; color: #fff; margin: 10px 60px; border-radius: 5px; }
  }

</style>
